<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="车辆信息" name="1">
        <div>
          <div class="search_box">
            <el-input v-model="carSearch.plate" placeholder="车牌"></el-input>
            <el-button type="primary" @click="getList">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </div>
          <div class="export_box">
            <el-button type="primary" @click="visible = true">新增</el-button>
          </div>
          <el-table :data="tableData" style="width: 100%" :height="h" border>
            <el-table-column
              prop="plate"
              label="车牌号"
              align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="type" label="车辆类型" align="center">
            </el-table-column>
            <el-table-column prop="specifications" label="规格" align="center">
              <template slot-scope="scope">
                {{ scope.row.specifications + "吨" }}
              </template>
            </el-table-column>
            <el-table-column prop="model" label="行驶证到期" align="center">
            </el-table-column>
            <el-table-column prop="kinds" label="保养日期" align="center">
            </el-table-column>
            <el-table-column prop="brand" label="品牌" align="center">
            </el-table-column>
            <el-table-column prop="create_time" label="生产日期" align="center">
            </el-table-column>
            <el-table-column prop="buy_time" label="购买日期" align="center">
            </el-table-column>
            <el-table-column prop="price" label="购买金额" align="center">
            </el-table-column>
            <el-table-column prop="source" label="车辆来源" align="center">
            </el-table-column>
            <el-table-column
              prop="belong_company"
              label="归属单位"
              align="center"
            >
            </el-table-column>

            <el-table-column prop="use_company" label="使用单位" align="center">
            </el-table-column>
            <el-table-column prop="remark" label="备注" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center" width="270">
              <template slot-scope="scope">
                <el-button type="text" @click="showInfo(scope.row)"
                  >出车记录</el-button
                >
                <el-button type="text" @click="showdetail(scope.row)"
                  >支出明细</el-button
                >
                <el-button
                  type="text"
                  @click="showExpenditureVisible(scope.row)"
                  >新增支出</el-button
                >
                <el-button type="text" @click="editMycar(scope.row)"
                  >编辑</el-button
                >
                <el-button type="text" @click="delMycar(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="page_table">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="1"
              :page-sizes="[10, 20, 30, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="carSearch.total"
            >
            </el-pagination>
          </div>
          <el-dialog
            title="车辆登记录入"
            :visible.sync="visible"
            width="720px"
            :before-close="handleClose"
          >
            <el-form
              :inline="true"
              :model="form"
              class="demo-form-inline"
              :rules="rules"
              ref="ruleForm"
              label-width="130px"
            >
              <el-form-item label="车牌号" prop="plate">
                <el-input v-model="form.plate" :disabled="edit"></el-input>
              </el-form-item>
              <el-form-item label="车辆类型" prop="type">
                <el-input v-model="form.type"></el-input>
              </el-form-item>
              <el-form-item label="规格" prop="specifications">
                <el-input v-model="form.specifications" type="number"
                  ><template slot="append">吨</template></el-input
                >
              </el-form-item>
              <el-form-item label="行驶证到期" prop="model">
                <el-date-picker
                  v-model="form.model"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy/MM/dd"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="保养日期" prop="kinds">
                <el-date-picker
                  v-model="form.kinds"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy/MM/dd"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="品牌" prop="brand">
                <el-input v-model="form.brand"></el-input>
              </el-form-item>

              <el-form-item label="车辆来源" prop="source">
                <el-input v-model="form.source"></el-input>
              </el-form-item>
              <el-form-item label="生产时间" prop="create_time">
                <el-date-picker
                  v-model="form.create_time"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy/MM/dd"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="购买金额" prop="price">
                <el-input v-model="form.price" type="number">
                  <template slot="append">元</template></el-input
                >
              </el-form-item>
              <el-form-item label="购买时间" prop="buy_time">
                <el-date-picker
                  v-model="form.buy_time"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy/MM/dd"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="购买单位" prop="use_company">
                <el-input v-model="form.use_company"></el-input>
              </el-form-item>
              <el-form-item label="归属单位" prop="belong_company">
                <el-input v-model="form.belong_company"></el-input>
              </el-form-item>

              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="form.remark"
                  type="textarea"
                  :rows="3"
                ></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="submitAdd">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-tab-pane>
      <el-tab-pane label="出车记录" v-if="activeName == 2" name="2">
        <div>
          <div class="search_box">
            <el-date-picker
              v-model="searchContent.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy/MM/dd"
            >
            </el-date-picker>
            <el-button type="primary" @click="getInfolist">搜索</el-button>
            <el-button type="primary" @click="resetInfolist">重置</el-button>
            <!-- <el-button type="primary" @click="exportData">导出数据</el-button> -->
          </div>
          <div class="export_box">
            <el-button type="primary" @click="exportData">导出数据</el-button>
          </div>
          <el-table :data="showInfoList" border style="width: 100%" :height="h">
            <el-table-column
              prop="create_time"
              label="日期"
              align="center"
              width="160"
            >
              <template slot-scope="scope">
                <div>
                  {{
                    !Array.isArray(scope.row.create_time)
                      ? scope.row.start_time
                      : `${scope.row.start_time} - ${scope.row.end_time}`
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="plate"
              label="车牌"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <div
                  :style="{
                    color: scope.row.source == 1 ? '#67c23a' : '#f56c6c',
                  }"
                >
                  {{ scope.row.plate }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="specifications" label="规格" align="center">
            </el-table-column>

            <el-table-column prop="unit_price" label="单价" align="center">
            </el-table-column>
            <el-table-column prop="units" label="计量单位" align="center">
            </el-table-column>
            <el-table-column prop="agreed_time" label="额定工时" align="center">
            </el-table-column>
            <el-table-column prop="true_time" label="实际工时" align="center">
            </el-table-column>
            <el-table-column prop="price1" label="金额" align="center">
            </el-table-column>
            <el-table-column
              prop="overtime_unit"
              label="加班单价"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="overtime_hours"
              label="加班时长"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="overtime_price"
              label="加班费"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="other_price" label="其他费用" align="center">
            </el-table-column>
            <el-table-column
              prop="other_remark"
              label="其他费用说明"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="total_price"
              label="总金额"
              align="center"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="content"
              label="工作内容"
              align="center"
              width="300"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="operator" label="操作人员" align="center">
            </el-table-column>
            <el-table-column prop="lessee" label="承租单位" align="center">
            </el-table-column>
            <el-table-column prop="dispatcher" label="派车人员" align="center">
            </el-table-column>
            <el-table-column prop="company" label="派车单位" align="center">
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              align="center"
              width="300"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="type"
              label="是否签单"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <div
                  :style="{
                    color: scope.row.is_bill1 == 1 ? '#67c23a' : '#f56c6c',
                  }"
                >
                  {{ scope.row.is_bill1 == 1 ? "已签单" : "未签单" }}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="page_table">
            <span style="line-height: 35px; margin-right: 30px"
              >总金额:
              <span style="color: red">{{ price1.toFixed(4) }}</span></span
            >
            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="1"
              :page-sizes="[10, 20, 30, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="searchContent.total"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="支出明细" v-if="activeName == 3" name="3">
        <div>
          <div class="serch_box">
            <el-date-picker
              v-model="searchContent1.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy/MM/dd"
            >
            </el-date-picker>
            <el-input
              style="width: 220px; margin-left: 20px"
              placeholder="支出项目"
              v-model="searchContent1.project"
            ></el-input>
            <el-button type="primary" @click="getdetail">搜索</el-button>
            <el-button type="primary" @click="resetdetail">重置</el-button>
            <!-- <el-button type="primary" @click="exportData1">数据导出</el-button> -->
          </div>
          <div class="export_box">
            <el-button type="primary" @click="exportData1">数据导出</el-button>
          </div>
          <el-table
            :data="showdetaillist"
            border
            style="width: 100%"
            :height="h"
          >
            <el-table-column prop="create_time" label="日期" align="center">
            </el-table-column>
            <el-table-column prop="amount" label="金额" align="center">
            </el-table-column>
            <el-table-column prop="project" label="支出项目" align="center">
            </el-table-column>
            <el-table-column prop="emp" label="申请人" align="center">
            </el-table-column>
            <el-table-column prop="remark" label="备注" align="center">
            </el-table-column>
          </el-table>
          <div class="page_table">
            <span style="line-height: 35px; margin-right: 30px"
              >总金额:
              <span style="color: red">{{ price2.toFixed(4) }}</span></span
            >
            <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page="1"
              :page-sizes="[10, 20, 30, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="searchContent1.total"
            >
            </el-pagination>
          </div>
          <el-dialog
            title="车辆支出录入"
            :visible.sync="expenditureVisible"
            width="720px"
            :before-close="closeexpend"
          >
            <el-form
              :inline="true"
              :model="zcform"
              class="demo-form-inline"
              label-width="130px"
              ref="zcForm"
              :rules="zcrules"
            >
              <el-form-item label="支出项目" prop="type">
                <el-select v-model="zcform.type">
                  <el-option
                    v-for="item in zclist"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="付款单位" prop="balance_id">
                <el-select
                  v-model="zcform.balance_id"
                  filterable
                  @change="changeBalance"
                >
                  <el-option
                    v-for="item in companyList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="申请人">
                <el-select v-model="zcform.emp_id">
                  <el-option
                    v-for="item in employeesList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="申请日期" prop="create_time">
                <el-date-picker
                  v-model="zcform.create_time"
                  type="date"
                  value-format="yyyy/MM/dd"
                  placeholder="请选择"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="收款单位" prop="collection_id">
                <el-select
                  v-model="zcform.collection_id"
                  filterable
                  @change="changeGys"
                >
                  <el-option
                    v-for="item in gysList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
                <!-- <el-input v-model="zcform.collection" style="width: 540px" /> -->
              </el-form-item>
              <el-form-item label="金额" prop="amount">
                <el-input v-model="zcform.amount" />
              </el-form-item>
              <el-form-item label="备注" prop="remark">
                <el-input v-model="zcform.remark" type="textarea" :rows="3" />
              </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
              <el-button @click="closeexpend">取 消</el-button>
              <el-button type="primary" @click="addExpend">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div id="carslist">
      <!-- 录入 -->

      <!-- 收支明细 -->
      <!-- <el-dialog title="车辆支出明细" :visible.sync="showzc" width="80%">
   
    </el-dialog> -->
      <!-- 新增支出 -->

      <el-dialog
        title="出车记录表"
        :visible.sync="showInfoVisible"
        width="80%"
        :before-close="closeShowInfo"
      >
        <!-- <div class="page_table">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="1"
          :page-sizes="[10, 20, 30, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="searchContent.total"
        >
        </el-pagination>
      </div> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getDataByKey, openDB, changeDB, deleteDB, editDB } from "@/db/indexdb";
import { searchTable } from "@/db/search";
import { printData } from "@/db/print";

export default {
  data() {
    return {
      activeName: "1",
      visible: false,
      expenditureVisible: false,
      showzc: false,
      detaileList: [],
      showdetaillist: [],
      detaileList1: [],
      form: {},
      zcform: {},
      zclist: [
        { value: 1, label: "加油" },
        { value: 2, label: "维修" },
        { value: 3, label: "保养" },
        { value: 4, label: "年检" },
        { value: 5, label: "出险" },
        { value: 6, label: "其他" },
      ],
      rules: {
        plate: [{ required: true, message: "请输入车牌", trigger: "blur" }],
        type: [{ required: true, message: "请输入车辆类型", trigger: "blur" }],
        specifications: [
          { required: true, message: "请输入车辆规格", trigger: "blur" },
        ],
      },
      zcrules: {
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        emp_id: [{ required: true, message: "申请人", trigger: "blur" }],
        create_time: [
          { required: true, message: "请选择时间", trigger: "blur" },
        ],
        amount: [{ required: true, message: "输入金额", trigger: "blur" }],
        balance_id: [
          { required: true, message: "选择收款单位", trigger: "blur" },
        ],
        collection_id: [
          { required: true, message: "选择输入收款单位", trigger: "blur" },
        ],
      },
      activeName: "1",
      tableData: [],
      companyList: [],
      employeesList: [],
      details_visible: false,
      detail_id: "",
      showInfoList: [],
      showInfoList1: [],
      showInfoVisible: false,
      carSearch: {
        plate: "",
        total: 0,
        page: 1,
        size: 10,
      },
      searchContent: {
        time: [],
        total: 0,
        page: 1,
        size: 10,
      },
      searchContent1: {
        time: [],
        project: "",
        total: 0,
        page: 1,
        size: 10,
      },
      edit: false,
      balanceList: [],
      gysList: [],
      h: 0,
      totalList: [],
      totalList1: [],
      price1: 0,
      price2: 0,
    };
  },
  created() {
    this.getList();
    this.getList1();
    this.h = document.documentElement.offsetHeight - 320;
  },
  methods: {
    exportData() {
      let header = [
        { value: "create_time", label: "日期", first: 1 },
        { value: "company", label: "派车单位" },
        { value: "plate", label: "车牌" },
        { value: "car_tpe", label: "车型" },
        { value: "specifications", label: "规格" },
        { value: "cost", label: "用车成本", total: 1, type: "n" },
        { value: "units", label: "计量单位" },
        { value: "unit_price", label: "单价", type: "n" },
        { value: "agreed_time", label: "额定工时", type: "n" },
        { value: "true_time", label: "实际工时", type: "n" },
        { value: "price1", label: "金额", total: 1, type: "n" },
        { value: "overtime_unit", label: "加班单价", type: "n" },
        { value: "overtime_time", label: "加班时长", type: "n" },
        { value: "overtime_price", label: "加班费", total: 1, type: "n" },
        {
          value: "other_price",
          label: "其他费用(收客户)",
          total: 1,
          type: "n",
        },
        { value: "other_remark", label: "其他费用说明(收客户)" },
        { value: "total_price", label: "合计金额", total: 1, type: "n" },
        {
          value: "other1_price",
          label: "其他费用(应收供应商)",
          total: 1,
          type: "n",
        },
        { value: "other1_remark", label: "费用说明(应收供应商)" },
        {
          value: "other2_price",
          label: "其他费用(应付客户)",
          total: 1,
          type: "n",
        },
        { value: "other2_remark", label: "费用说明(应付客户)" },
        { value: "content", label: "工作内容" },
        { value: "remark", label: "说明" },
      ];
      let msg = {
        msg1: "车辆出车表",
      };
      printData(msg, this.totalList, header);
    },
    exportData1() {
      let header = [
        { value: "create_time", label: "日期", first: 1 },
        { value: "emp", label: "申请人" },
        { value: "project", label: "支出项" },
        { value: "amount", label: "金额", total: 1, type: "n" },
        { value: "remark", label: "备注" },
      ];
      let msg = {
        msg1: "车辆支出表",
      };
      printData(msg, this.totalList1, header);
    },
    resetSearch() {
      this.carSearch = {
        plate: "",
        total: 0,
        page: 1,
        size: 10,
      };
      this.getList();
    },
    getList() {
      openDB("car", "list").then(() => {
        getDataByKey("list", "车辆登记表").then((res) => {
          let { total, list } = searchTable(res?.data, this.carSearch, 1);
          this.carSearch.total = total;
          this.tableData = list;
        });
      });
    },
    getList1() {
      openDB("car", "list").then(() => {
        getDataByKey("list", "公司信息表").then((res) => {
          this.companyList = res?.data;
        });
        getDataByKey("list", "员工表").then((res) => {
          this.employeesList = res.data;
        });
        getDataByKey("list", "出车记录表").then((res) => {
          this.detaileList1 = res.data;
        });
        getDataByKey("list", "供应商表").then((res) => {
          this.gysList = res.data;
        });
      });
    },
    submitAdd() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let data = { ...this.form };
          if (this.edit) {
            editDB("list", "车辆登记表", data).then(() => {
              this.getList();
              this.$message.success("修改成功");
            });
          } else {
            data.id = new Date().getTime();
            changeDB("list", "车辆登记表", data).then(() => {
              this.getList();
              this.$message.success("添加成功");
            });
          }
          this.handleClose();
        } else {
          return false;
        }
      });
    },
    handleClose() {
      this.visible = false;
      this.form = {};
      this.edit = false;
    },
    editMycar(row) {
      this.form = { ...row };
      this.edit = true;
      this.visible = true;
    },
    delMycar(row) {
      this.$confirm("确定删除该条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteDB("list", "车辆登记表", row.id)
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
              this.visible = false;
            })
            .catch((err) => {
              this.$message.error(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 收支明细
    handleSizeChange2(val) {
      this.searchContent1.size = val;
      this.getdetail();
    },
    handleCurrentChange2(val) {
      this.searchContent1.page = val;
      this.getdetail();
    },
    async showdetail(row) {
      this.detail_id = row.id;
      this.showdetaillist = [];
      this.getdetail(row.id);
      // this.showzc = true;
      this.activeName = "3";
    },
    resetdetail() {
      this.searchContent1 = {
        time: [],
        project: "",
        total: 0,
        page: 1,
        size: 10,
      };
      this.getdetail();
    },
    getdetail() {
      getDataByKey("list", "车辆支出表").then((res) => {
        let result = res?.data.filter((v) => {
          return v.car_id == this.detail_id;
        });
        let { total, list, totalList } = searchTable(
          result,
          this.searchContent1,
          1,
          "create_time"
        );
        this.searchContent1.total = total;
        this.showdetaillist = list;
        this.totalList1 = totalList;
        let price2 = 0;
        totalList.map((item) => {
          price2 = price2 + Number(item.amount || 0);
        });
        this.price2 = price2;
      });
    },
    // 新增支出
    showExpenditureVisible(row) {
      this.activeName = "3";
      this.zcform.car_id = row.id;
      this.zcform.plate = row.plate;
      this.detail_id = row.id;
      this.getdetail();
      this.expenditureVisible = true;
    },
    closeexpend() {
      this.expenditureVisible = false;
      this.zcform = {};
    },
    changeBalance(val) {
      let result =
        this.companyList.filter((item) => {
          return item.id == val;
        })[0]?.name || "";
      this.zcform.balance_name = result;
    },
    changeGys(val) {
      let result = this.gysList.filter((item) => {
        return item.id == val;
      })[0];
      this.zcform.collection = result?.name;
    },
    addExpend() {
      this.$refs["zcForm"].validate((valid) => {
        if (valid) {
          let data = { id: new Date().getTime(), ...this.zcform };
          data.abstract = this.zclist.filter((v) => {
            return v.value == data.type;
          })[0].label;
          data.project = data.abstract;
          data.emp =
            this.employeesList.filter((v) => {
              return v.id == data.emp_id;
            })[0]?.name || "";
          data.start_time = data.create_time;
          data.end_time = data.create_time;
          changeDB("list", "车辆支出表", data).then(() => {
            this.addIncome(data);
            this.closeexpend();
            this.getdetail();
            this.$message.success("添加成功");
          });
        } else {
          return false;
        }
      });
    },
    addIncome(data) {
      let data1 = {
        id: Number(new Date().getTime()),
        item_type: 2,
        type: 5,
        cars_id: data.id,
        project_id: data.id,
        project_name: "车辆支出",
        receivable: data.collection || "",
        receivable_id: data.collection_id || "",
        payable: data.balance_name,
        payable_id: data.balance_id,
        total_price: data.amount,
        abstract: data.plate + " - " + data.abstract,
      };
      changeDB("list", "收付款表", data1).then(() => {});
    },
    handleSizeChange(val) {
      this.carSearch.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.carSearch.page = val;
      this.getList();
    },
    closeShowInfo() {
      this.showInfoList = [];
      this.showInfoVisible = false;
    },
    handleSizeChange1(val) {
      this.searchContent.size = val;
      this.getInfolist();
    },
    handleCurrentChange1(val) {
      this.searchContent.page = val;
      this.getInfolist();
    },
    resetInfolist() {
      this.searchContent = {
        time: [],
        total: 0,
        page: 1,
        size: 10,
      };
      this.getInfolist();
    },
    getInfolist() {
      let { total, list, totalList } = searchTable(
        this.showInfoList1,
        this.searchContent,

        1
      );
      this.totalList = totalList;
      this.searchContent.total = total;
      this.showInfoList = list;
      let price1 = 0;
      totalList.map((item) => {
        price1 = price1 + Number(item.total_price || 0);
      });
      this.price1 = price1;
    },
    showInfo(row) {
      this.showInfoList1 = this.detaileList1.filter((item) => {
        return item.source == 1 && item.car_id == row.id;
      });
      this.getInfolist();
      // this.showInfoVisible = true;
      this.activeName = "2";
    },
  },
};
</script>

<style lang="scss" scoped>
.search_box {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  .el-input,
  .el-select {
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-date-editor {
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-button {
    margin-bottom: 20px;
  }
}
.export_box {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.page_table {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.el-form {
  .el-select,
  .el-input,
  .el-date-editor {
    width: 200px;
  }
}

.el-form {
  .el-select,
  .el-input,
  .el-date-editor {
    width: 200px;
  }
  .el-textarea {
    width: 540px;
  }
  .el-date-editor--datetimerange {
    width: 540px;
  }
}
.serch_box {
  display: flex;
  margin-bottom: 20px;
  .el-button {
    margin-left: 20px;
  }
}
.total_box {
}
</style>
